<template>
  <b-col :class="{headImage:type == 1,fanjuHeadImage:type == 2,other:type == 0,'shadow-sm':type == 0}">
    <b-navbar class="mw-100 mh-100 shadow-none nav">
      <b-container>
        <b-navbar-brand class="pt-0" style="color:#f16868;" href="#">WaaFun</b-navbar-brand>
        <!-- 导航栏左侧 -->
        <b-navbar-nav>
          <b-nav-item class="px-2" @click="toHomePage">
            <b-link class="text-decoration-none hvr-float" :style="{color:type == 1||type == 2 ? 'white':'black'}">首页</b-link>
          </b-nav-item>
          <b-nav-item class="px-2" @click="toAnimationPage">
            <b-link class="text-decoration-none hvr-float" :style="{color:type == 1||type == 2 ? 'white':'black'}">番剧库</b-link>
          </b-nav-item>
          <b-nav-item class="px-2" href="#">
            <b-link to="/About" class="text-decoration-none hvr-float" :style="{color:type == 1||type == 2 ? 'white':'black'}">关于</b-link>
          </b-nav-item>
        </b-navbar-nav>
        <!-- 导航栏右侧 -->
        <b-navbar-nav class="ml-auto">
          <!-- 搜索表单 -->
          <b-nav-form v-show="this.$route.path == '/HomePage/HotListCard' || this.$route.path == '/HomePage/SocialCard' || type==2" class="wd-100">
            <b-form-input type="search" v-model="text" class="rounded-pill serach" size="sm" placeholder="搜索" />
            <b-link style="font-size:25px" class="text-light text-decoration-none px-2 iconfont icon-search" @click="toSerach" />
          </b-nav-form>
        </b-navbar-nav>
      </b-container>
    </b-navbar>
  </b-col>
</template>

<script>
export default {
  name: "NavigationBar",
  props: {
    type: Number,
  },
  data() {
    return {
      //搜索框的内容
      text: '',
    }
  },
  methods: {
    //跳转到首页
    toHomePage() {
      this.$router.push({
        path: '/HomePage',
        params: {
          title: '首页'
        }
      }).catch(err => err)
      window.location.reload();
    },
    //跳转到番剧库
    toAnimationPage() {
      if (this.$route.path == '/AnimationPage') {
        return
      }
      this.$router.push({
        path: '/AnimationPage',
        query: {
          page: 1,
        }
      }).catch(err => err)
    },
    //跳转到搜索页面
    toSerach() {
      this.text = this.text.replace(/\s+/g, '');
      if (this.text != '') {
        this.$router.push({
          path: '/SearchResult',
          query: {
            text: this.text,
            page: 1,
          }
        })
      }
    },
  }
};
</script>

<style scoped>
.headImage {
  height: 265px;
  width: 100%;
  background: url("https://s1.imagehub.cc/images/2023/04/04/b48aa2b1fa3ffe40f585fb251f5c5070.jpeg")
    center;
  background-size: 100%;
  background-color: #00000000;
  /* border-bottom:solid 2px #0c91de; */
}
.fanjuHeadImage {
  background-color: #0000003a;
  z-index: 3;
  position: absolute;
}
.other {
  background-color: white;
}
.navbar-brand {
  font-size: 25px;
  font-family: "HYTianYunHouMoTiW";
}
.form-control-md:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.btn:focus {
  box-shadow: none;
  outline: none;
}
.list-group-item,
.nav-link {
  font-size: 18px;
  font-family: "HYZhengYuan-55S";
}
.list-group-item:hover {
  color: #49a8fc;
}
.nav-item:hover {
  color: #000000;
}
.serach:focus {
  width: 300px;
}
</style>
